<template>
  <h3>文本插值&原始 HTML</h3>
  <hr />
  <div>
    <p>Using text interpolation: {{ rawHtml }}</p>

    <hr />

    <p v-text="rawHtml"></p>

    <hr />

    <p>Using text interpolation: {{ rawHtml + '后缀字符串' }}</p>

    <p>Using text interpolation: {{ ` ${rawHtml} 后缀字符串` }}</p>

    <p>Using text interpolation: {{ istrue ? rawHtml : ` ${rawHtml} 后缀字符串false` }}</p>

    <p>Using text interpolation: {{ istrue ? arr.join(',') : ` ${rawHtml} 后缀字符串false` }}</p>

    <p>{{ arr.join(',') }}</p>
    <hr />

    <p v-text="rawHtml + '后缀字符串'"></p>

    <p v-text="` ${rawHtml} 后缀字符串`"></p>

    <p v-text="istrue ? rawHtml : ` ${rawHtml} 后缀字符串false`"></p>

    <p v-text="arr.join(',')"></p>
    <hr />

    <div>
      Using v-html directive:
      <div v-html="rawHtml"></div>
    </div>
    <hr />
  </div>
</template>

<script lang="ts">
export default {
  name:'Study2StudDemo1'
}
</script>

<script setup lang="ts">
const rawHtml = `
  <span style="color:blue"> 我是html标签span </span>
`
const istrue = false

const arr = ['刘长生', '黄嘉辉', '廖文静']
</script>

<style></style>
